<template>
    <el-dialog class="edit-attr-dialog" v-model="dialogStatus" title="属性选择">
        <el-form
            label-width="100px"
            :model="form"
          >
            <el-form-item label="属性所属">
                {{form}}
              <el-select v-model="form.attrType" placeholder="Select">
                  <el-option v-for="item in attrType" :key="item.type" :label="item.label" :value="item.type"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="属性额外数据">
              <!-- <el-input  v-model="form.extendData" /> -->
              <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" @change="extendChange" resize="none" v-model="extendVal" :placeholder="'请输入属性额外数据'" />
            </el-form-item>
            <el-form-item label="属性名称">
              <el-input v-model="form.label" />
            </el-form-item>
            <el-form-item label="属性值类型">
              <el-input v-model="form.type" />
            </el-form-item>
            <el-form-item label="属性默认值">
              <el-input v-model="form.value" />
            </el-form-item>
          </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close" size="small">取消</el-button>
                <el-button type="primary" @click="confirmEdit" size="small">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    import { ref } from 'vue'
    import { basicComponent } from '@/api/index.js'
	import { ElMessage } from 'element-plus'
    export default {
        props: {
            dialogFormVisible: {
                type: Boolean,
                default: false
            },
            data: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        emits: ['update:dialogFormVisible'],
        setup(props, context) {
            let form = ref({
                attrType: '',
                extendData: '',
                label: '',
                type: '',
                value: ''
            })
			let extendVal = ref('') // extendData的json字符串
            let dialogStatus = ref(false)
            let attrType = ref([]) // 属性类型列表
            // 获取属性类型
            function getAttrType() {
                let param = {
                    pageNum: 1,
                    pageSize: 10000
                }
                basicComponent.getBasicComponentAttrType(param).then((res) => {
                    if (res.status === 1) {
                        let temp = []
                        res.data.list.map((item) => {
                            temp.push({
                                label: item.name,
                                value: item.id,
                                type: item.type
                            })
                        })
                        attrType.value = temp
                    }
                })
            }
            // 关闭弹窗
            function close() {
                dialogStatus.value = false
            }
            // 保存编辑
            function confirmEdit() {
                if (form.value.extendData) {
                    // form.value.extendData = JSON.parse(form.value.extendData)
                }
                context.emit('save', form.value)
                close()
            }
			// 监听extendData的变化
			function extendChange(e) {
				if (extendVal.value === '') {
					form.value.extendData = null
				} else {
					try {
						let temp = JSON.parse(extendVal.value)
						form.value.extendData = temp
					} catch {
						ElMessage({
						    message: '格式不是JSON格式，请修改正确格式',
						    type: 'error'
						})
					}
				}
			}
            getAttrType()
            return {
                form,
                attrType,
                close,
                confirmEdit,
                dialogStatus,
				extendVal,
				extendChange
            }
        },
        watch: {
            dialogFormVisible: {
                handler(v) {
                    this.dialogStatus = v
                }
            },
            dialogStatus: {
                handler(v) {
                    this.$emit('update:dialogFormVisible', v)
                }
            },
            data: {
                handler(v) {
                    if (v) {
                        for (let key in v) {
                            this.form[key] = v[key]
							this.extendVal = JSON.stringify(v['extendData'])
                        }
                    }
                },
                deep: true
            }
        }
    }
</script>

<style>
</style>
